.heading {
    font-size: 25px;
    margin-right: 25px;
  }
  
  .fa {
    font-size: 25px;
  }
  
  .checked {
    color: orange;
  }
  
  /* 三列布局 */
  .side {
    float: left;
    width: 15%;
    margin-top:10px;
  }
  
  .middle {
    margin-top:10px;
    float: left;
    width: 65%;
  }
  
  /* 将文本放在右边 */
  .right {
    text-align: right;
  }
  
  /* 清除列后的浮点数 */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* 条形容器 */
  .bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
  }
  
  /* 单独的条形图 */
  .bar-5 {width: 90%; height: 18px; background-color: #4CAF50;}
  .bar-4 {width: 80%; height: 18px; background-color: #2196F3;}
  .bar-3 {width: 50%; height: 18px; background-color: #00bcd4;}
  .bar-2 {width: 50%; height: 18px; background-color: #ff9800;}
  .bar-1 {width: 35%; height: 18px; background-color: #f44336;}
  .bar-11 {width: 34%; height: 18px; background-color: #dbf436;}
  .bar-12 {width: 30%; height: 18px; background-color: #3da0d2;}
  .bar-13 {width: 29%; height: 18px; background-color: #f436ce;}
  .bar-14 {width: 25%; height: 18px; background-color: #f43656;}
  .bar-15 {width: 18%; height: 18px; background-color: #a236f4;}
  .bar-16 {width: 8%; height: 18px; background-color: #f43656;}


  
  /* 响应式布局 - 使列堆叠在彼此之上而不是彼此相邻 */
  @media (max-width: 400px) {
    .side, .middle {
      width: 100%;
    }
    .right {
      display: none;
    }
  }